<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>服务列表</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f8fafc;
            max-width: 750px;
            margin: 0 auto;
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(30, 64, 175, 0.1);
        }
    </style>
</head>
<body class="pb-20">
    <!-- 顶部导航 -->
    <header class="bg-white py-4 px-6 shadow-sm">
        <div class="flex items-center relative">
            <a href="categories.html" class="text-gray-600 absolute left-0 z-10">
                <i class="fas fa-chevron-left text-lg"></i>
            </a>
            <h1 class="text-xl font-semibold text-center flex-1">服务列表</h1>
            <a href="#" class="text-blue-500 text-sm absolute right-0 z-10">筛选</a>
        </div>
    </header>

    <!-- 筛选标签 -->
    <div class="bg-white px-4 py-3 border-b border-gray-100">
        <div class="flex space-x-2 overflow-x-auto">
            <button class="px-4 py-2 rounded-full text-sm whitespace-nowrap bg-blue-500 text-white">
                综合排序
            </button>
            <button class="px-4 py-2 rounded-full text-sm whitespace-nowrap bg-gray-100 text-gray-600">
                评分最高
            </button>
            <button class="px-4 py-2 rounded-full text-sm whitespace-nowrap bg-gray-100 text-gray-600">
                价格最低
            </button>
            <button class="px-4 py-2 rounded-full text-sm whitespace-nowrap bg-gray-100 text-gray-600">
                距离最近
            </button>
        </div>
    </div>

    <!-- 服务列表 -->
    <div class="p-4" onclick="window.location.href='elderly-service-detail.html'">
        <div class="space-y-4">
            <!-- 服务卡片1 -->
            <div class="flex card-hover p-4 bg-white rounded-xl shadow-sm hover:bg-gray-50">
                <div class="w-24 h-24 bg-cover bg-center rounded-lg" style="background-image: url('http://www.dzgktf.com/templets/default/images/wtyt.jpg');"></div>
                <div class="ml-4 flex-1">
                    <div class="flex justify-between items-start mb-2">
                        <h3 class="font-medium text-gray-800 text-lg">全屋深度清洁</h3>
                        <span class="bg-red-100 text-red-600 text-xs px-2 py-1 rounded-full">热门</span>
                    </div>
                    <div class="flex items-center mb-2">
                        <div class="flex text-yellow-400 text-xs">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star-half-alt"></i>
                        </div>
                        <span class="text-xs text-gray-500 ml-1">4.8 (256)</span>
                    </div>
                    <p class="text-sm text-gray-600 mb-3">专业清洁团队，深度清洁全屋</p>
                    <div class="flex items-center justify-between">
                        <div>
                            <span class="text-red-500 font-bold text-lg">¥128</span>
                            <span class="text-xs text-gray-500 line-through ml-1">¥168</span>
                        </div>
                        <button class="bg-blue-500 text-white px-4 py-2 rounded-full text-sm font-medium">
                            立即预约
                        </button>
                    </div>
                </div>
            </div>

            <!-- 服务卡片2 -->
            <div class="flex card-hover p-4 bg-white rounded-xl shadow-sm hover:bg-gray-50">
                <div class="w-24 h-24 bg-cover bg-center rounded-lg" style="background-image: url('http://www.dzgktf.com/templets/default/images/wtyt.jpg');"></div>
                <div class="ml-4 flex-1">
                    <div class="flex justify-between items-start mb-2">
                        <h3 class="font-medium text-gray-800 text-lg">金牌月嫂服务</h3>
                        <span class="bg-yellow-100 text-yellow-600 text-xs px-2 py-1 rounded-full">金牌</span>
                    </div>
                    <div class="flex items-center mb-2">
                        <div class="flex text-yellow-400 text-xs">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                        <span class="text-xs text-gray-500 ml-1">5.0 (189)</span>
                    </div>
                    <p class="text-sm text-gray-600 mb-3">专业月嫂团队，提供新生儿护理</p>
                    <div class="flex items-center justify-between">
                        <div>
                            <span class="text-red-500 font-bold text-lg">¥8800</span>
                            <span class="text-xs text-gray-500 ml-1">/月</span>
                        </div>
                        <button class="bg-blue-500 text-white px-4 py-2 rounded-full text-sm font-medium">
                            立即预约
                        </button>
                    </div>
                </div>
            </div>

            <!-- 服务卡片3 -->
            <div class="flex card-hover p-4 bg-white rounded-xl shadow-sm hover:bg-gray-50">
                <div class="w-24 h-24 bg-cover bg-center rounded-lg" style="background-image: url('http://www.dzgktf.com/templets/default/images/wtyt.jpg');"></div>
                <div class="ml-4 flex-1">
                    <div class="flex justify-between items-start mb-2">
                        <h3 class="font-medium text-gray-800 text-lg">老人专业陪护</h3>
                        <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full">专业</span>
                    </div>
                    <div class="flex items-center mb-2">
                        <div class="flex text-yellow-400 text-xs">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="far fa-star"></i>
                        </div>
                        <span class="text-xs text-gray-500 ml-1">4.2 (103)</span>
                    </div>
                    <p class="text-sm text-gray-600 mb-3">专业护理人员，提供24小时陪护</p>
                    <div class="flex items-center justify-between">
                        <div>
                            <span class="text-red-500 font-bold text-lg">¥150</span>
                            <span class="text-xs text-gray-500 ml-1">/天</span>
                        </div>
                        <button class="bg-blue-500 text-white px-4 py-2 rounded-full text-sm font-medium">
                            立即预约
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
